﻿@import '_variaveis.scss';
@import '_mixins.scss';

#sectionProdutos {
	min-height: 400px;
	font-family: $font;

	#asideCategorias {
		@include float(auto, 20%, 20px, 2%);

		.pTituloAside {
			margin: 0;
			padding-left: 2%;
			height: 70px;
			width: 98%;
			line-height: 69px;
			font-size: 40px;
			background: $background_header;
			color: $verde_bybike;
		}

		ul {
			margin: 0;
			padding: 0;
			padding-left: 2%;
			width: 98%;
			font-size: 30px;
			list-style: none;

			& > li {
				padding: 5px 0 5px 0;

				a {
					text-decoration: none;
					color: black;

					&:hover {
						color: $background_header;
					}
				}
			}
		}
	}

	#sectionListaProdutos {
		@include float(auto, 75%, 20px, 1%);

		#sectionOrdenacao {
			@include float(60px, 99%);
			padding-left: 1%;
			font-size: 30px;
			line-height: 59px;
			color: $verde_bybike;
			background: $background_header;

			#ddlOrdenarProdutos {
				height: 30px;
				width: 250px;
				font-size: 20px;
			}
		}

		#sectionRepeater {
			@include float(auto, 100%, 20px);
			font-size: 30px;

			& .articleProduto {
				@include float(580px, 400px);
				margin-left: 1%;
				margin-bottom: 50px;
				text-align: center;
				background: white;
				-moz-box-shadow: 0 0 5px 2px #aaa;
				-webkit-box-shadow: 0 0 5px 2px #aaa;
				box-shadow: 0 0 5px 2px #aaa;

				&:hover {
					-moz-box-shadow: 0 0 5px 3px $background_header;
					-webkit-box-shadow: 0 0 5px 3px $background_header;
					box-shadow: 0 0 5px 3px $background_header;
				}

				& .articleImagemProduto {
					height: 450px;
					background: white;

					& .imagemProduto {
						max-height: 430px;
						max-width: 330px;
					}
				}

				& .articlePromocao {
					position: relative;
					top: -1550px;
					left: 0;
					height: 100px;
					width: 100px;
					background: rgba(255, 50, 50, 0.7);
				}

				& .articleDescricaoProduto {
					margin-top: -200px;
					height: 140px;
					width: 100%;
					font-weight: bold;
					font-size: 24px;
				}

				& .articlePreco {
					margin-left: 5%;
					height: 40px;
					width: 90%;
					line-height: 39px;
					font-weight: bold;
					font-size: 24px;
					border-top: 2px dashed red;
					/*background: #eee;*/
				}
			}
		}

		#navPaginacao {
			@include float(auto, 100%, 0, 0);
			text-align: center;

			.Pagination {
				height: 46px;
				width: 200px;
				font-size: 20px;
				background: $background_header;
				color: $verde_bybike;
				border: none;
			}

			#lblPagAtual {
				padding-left: 10px;
				padding-right: 10px;
				font-size: 20px;
			}
		}
	}
}

.PaginationDisabled {
	height: 26px;
	width: 100px;
	background: #aaa;
	color: black;
	border: none;
}

@media only screen and (max-width: 1300px) and (min-width: 1051px) {
	#sectionProdutos {
		#sectionListaProdutos {
			#sectionRepeater {
				.articleProduto {
					margin-left: 1% !important;
				}
			}

			#navPaginacao {
				.Pagination {
					height: 40px;
					width: 130px;
					font-size: 18px;
					background: $background_header;
					color: $verde_bybike;
					border: none;
				}

				#lblPagAtual {
					padding-left: 10px;
					padding-right: 10px;
					font-size: 20px;
				}
			}
		}
	}
}

@media only screen and (max-width: 1050px) and (min-width: 871px) {
	#sectionProdutos {
		#sectionListaProdutos {
			#sectionRepeater {
				& .articleProduto {
					margin-left: 7% !important;
				}
			}

			#navPaginacao {
				.Pagination {
					height: 40px;
					width: 130px;
					font-size: 18px;
					background: $background_header;
					color: $verde_bybike;
					border: none;
				}

				#lblPagAtual {
					padding-left: 10px;
					padding-right: 10px;
					font-size: 20px;
				}
			}
		}
	}
}

@media only screen and (max-width: 870px) and (min-width: 821px) {
	#sectionProdutos {
		#asideCategorias {
			display: none;
		}

		#sectionListaProdutos {
			width: 100% !important;
			margin: 0 !important;

			#navPaginacao {
				@include float(auto, 100%, 0, 0);
				text-align: center;

				.Pagination {
					height: 36px !important;
					width: 150px !important;
					font-size: 20px;
				}

				#lblPagAtual {
					padding-left: 10px;
					padding-right: 10px;
					font-size: 20px;
				}
			}
		}
	}

	.PaginationDisabled {
		height: 26px;
		width: 100px;
		background: #aaa;
		color: black;
		border: none;
	}
}

@media only screen and (max-width: 820px) and (min-width: 341px) {
	#sectionProdutos {
		#asideCategorias {
			display: none;
		}

		#sectionListaProdutos {
			width: 100% !important;
			margin: 0 !important;

			#sectionRepeater {
				.articleProduto {
					@include float(480px, 300px);
					margin-left: 6%;
					margin-bottom: 50px;
					text-align: center;
					background: white;
					-moz-box-shadow: 0 0 5px 2px #aaa;
					-webkit-box-shadow: 0 0 5px 2px #aaa;
					box-shadow: 0 0 5px 2px #aaa;
				}
			}

			#navPaginacao {
				.Pagination {
					height: 36px !important;
					width: 130px !important;
					font-size: 16px;
				}

				#lblPagAtual {
					padding-left: 10px;
					padding-right: 10px;
					font-size: 16px;
				}
			}
		}
	}
}

@media only screen and (max-width: 340px) {
	#sectionProdutos {
		#asideCategorias {
			display: none;
		}

		#sectionListaProdutos {
			@include float(auto, 100%, 20px, 0);

			#sectionOrdenacao {
				@include float(120px, 100%);
				font-size: 30px;
				line-height: 59px;
				color: $verde_bybike;
				background: $background_header;

				#ddlOrdenarProdutos {
					height: 30px;
					width: 98%;
					font-size: 20px;
				}
			}

			#sectionRepeater {
				& .articleProduto {
					@include float(380px, 250px);
					margin-left: 10%;
					margin-bottom: 50px;
					text-align: center;
					background: white;
					-moz-box-shadow: 0 0 5px 2px #aaa;
					-webkit-box-shadow: 0 0 5px 2px #aaa;
					box-shadow: 0 0 5px 2px #aaa;

					&:hover {
						-moz-box-shadow: 0 0 5px 3px $background_header;
						-webkit-box-shadow: 0 0 5px 3px $background_header;
						box-shadow: 0 0 5px 3px $background_header;
					}

					& .articleImagemProduto {
						height: 300px;
						background: white;

						& .imagemProduto {
							max-height: 280px;
							max-width: 230px;
						}
					}

					& .articlePromocao {
						position: relative;
						top: -300px;
						left: 0;
						height: 50px;
						width: 50px;
						background: rgba(255, 50, 50, 0.7);
					}

					& .articleDescricaoProduto {
						margin-top: -140px;
						height: 130px;
						width: 100%;
						font-weight: bold;
						font-size: 24px;
					}

					& .articlePreco {
						margin-left: 5%;
						height: 40px;
						width: 90%;
						line-height: 39px;
						font-weight: bold;
						font-size: 24px;
						border-top: 2px dashed red;
						/*background: #eee;*/
					}
				}
			}

			#navPaginacao {
				@include float(auto, 100%, 0, 0);
				text-align: center;

				.Pagination {
					height: 46px;
					width: 200px;
					margin-left: 20px;
					margin-right: 20px;
					margin-bottom: 5px;
					font-size: 20px;
					background: $background_header;
					color: $verde_bybike;
					border: none;
				}

				#lblPagAtual {
					padding-left: 10px;
					padding-right: 10px;
					margin-left: 50px;
					margin-right: 50px;
					font-size: 20px;
				}
			}
		}
	}
}
